<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云课堂</title>
	<style>
		.a img{
			float: left;
			padding-top: 16px;
			padding-left: 20px;
			padding-right: 20px;
		}
		.a li{
			float: left;
			list-style: none;
			/*margin-left: 20px;*/
		}
		.a{
			width: 100%;
			height: 60px;
			background-color: black;
			float: left;
		}
		.a a{
			color: white;
			text-decoration: none;
			margin: auto;
			padding: 20px;
			display: inline-block;

		}
		.a ul{
			margin: 0;
			padding: 0;
		}
		.son1 select{
		 	margin-left: 300px;
			height: 36px;
			border: none;
			border-top: 20px;
		}
		.son2 input{
			height: 36px;
			padding: 0;
			border: none;
		}
		.son3 button{
			width: 36px;
			height: 36px;
			padding:0;
			border: none;
			background: url("search.png");
			padding-top:0px;
			padding-left: 0px;
		}
		.son{
			margin-top: 13px;
		}
		.son4{
			padding: 0;

		}
		.son4>a{
			padding: 0px;
		}

	</style>
</head>
<body>
	<nav>
		<div class="a">
			<img src="logo.png" alt="">
			<ul>
				<li><a href="#">精品课</a></li>
				<li><a href="#">微专业</a></li>
				<li><a href="#">下载APP</a></li>	
				<li class="son son1">
					<select name="add" id=""><option value="课程">课程</option></select>
				</li>	

					<li class="son son2"><input type="text" placeholder="搜索课程"></li>
					<li class="son son3"><button></button></li>
				
				<li><a href="#">我的学习</a></li>
				<li><a href="#">消息</a></li>
				<li><a href="#">购物车</a></li>
				<li><a href="#">登录/注册</a></li>
				<li class="son4"><a href="#"><img src="small.jpg" alt=""></a></li>
		</ul>
		</div>
	</nav>
</body>
</html>